<template>
  <basic-container class="cost-calculation">

    <div class="map-box">
      <section class="address-box">
        <div class="address-top-box">
          <el-checkbox size="small" v-model="showLabel" label="显示文字" border @change="handleLabelCheck"></el-checkbox>

          生产仓所在城市：
          <CitySelect size="small" ref="citySelect" class="w-100" v-model="cityId" clearable
            @change="handleCityChange" @loadedList="handleLoadedCityList" filterable></CitySelect>
        </div>
      </section>

      <XmMap ref="xmMap" style="width: 100%;height: 100%;" @loadedMap="handleLoadedMap"></XmMap>
    </div>

  </basic-container>
</template>

<script>
import { getStore } from '@/util/store'
import radioSelectDialog from '@/components/dialog/radioSelectDialog.vue';
import { getWarehouseLabel } from '@/util/map'
import { icons } from "@/const";
import { getWarehouseList, getWarehouseByType } from "@/api/warehouse";
const baxiList = [
  {
    "city": "广州",
    "name": "八喜冰淇淋蛋糕（广州总店）",
    "adress": "广州市海珠区桂田村南约大街23号之一自编B11-1铺",
    "sales": "1000+",
    "lng": 113.32,
    "lat": 23.09,
  },
  {
    "city": "广州",
    "name": "八喜冰淇淋蛋糕（番禺店）",
    "adress": "广州市番禺区南村镇海顺路73号1座118号",
    "sales": "1000+",
    "lng": 113.35,
    "lat": 23.00,
  },
  {
    "city": "广州",
    "name": "八喜冰淇淋蛋糕（白云店）",
    "adress": "广州市白云区黄边北路向荣街288号",
    "sales": "1000+",
    "lng": 113.29,
    "lat": 23.22,
  },
  {
    "city": "广州",
    "name": "八喜冰淇淋蛋糕（东圃店）",
    "adress": "广州市天河区盈汇街120号",
    "sales": "1000+",
    "lng": 113.42,
    "lat": 23.12,
  },
  {
    "city": "广州",
    "name": "八喜冰淇淋蛋糕（广州旗舰店）",
    "adress": "广州市越秀区童心路8号一楼自编106号铺",
    "sales": "3000+",
    "lng": 113.27,
    "lat": 23.14,
  },
  {
    "city": "深圳",
    "name": "八喜冰淇淋蛋糕（五和店）",
    "adress": "深圳市龙华区龙华街道油松社区荔苑新村41栋101",
    "sales": "1000+",
    "lng": 114.05,
    "lat": 22.63,
  },
  {
    "city": "武汉",
    "name": "八喜冰淇淋蛋糕（汉阳旗舰店）",
    "adress": "武汉市汉阳区四新北路以南、芳草东路以东招商樾望招商项目第5栋2层12商号房",
    "sales": "1000+",
    "lng": 114.21,
    "lat": 30.53,
  },
  {
    "city": "武汉",
    "name": "八喜冰淇淋蛋糕（武昌直营店）",
    "adress": "武汉市洪山区火星空间附近江宏花园c14-10",
    "sales": "500+",
    "lng": 114.31,
    "lat": 30.52,
  },
  {
    "city": "武汉",
    "name": "八喜冰淇淋蛋糕（武昌店）",
    "adress": "武昌区中南路街武珞路340号佳兆业广场3号楼1层商6",
    "sales": "800+",
    "lng": 114.32,
    "lat": 30.54,
  },
  {
    "city": "武汉",
    "name": "八喜冰淇淋蛋糕（江汉店）",
    "adress": "武汉市江汉区金家墩特1号武汉天街商业、2号办公楼栋/单元1层（32）",
    "sales": "800+",
    "lng": 114.26,
    "lat": 30.61,
  },
  {
    "city": "武汉",
    "name": "八喜冰淇淋蛋糕（徐东店）",
    "adress": "武昌区徐东二路2号水岸星城2号B栋1层12号",
    "sales": "700+",
    "lng": 114.35,
    "lat": 30.58,
  },
  {
    "city": "长沙",
    "name": "八喜冰淇淋蛋糕店（长沙岳麓店）",
    "adress": "长沙市岳麓区西湖街道黄泥岭社区星语林公寓3栋119号门面房",
    "sales": "2000+",
    "lng": 112.93,
    "lat": 28.21,
  },
  {
    "city": "长沙",
    "name": "八喜冰淇淋蛋糕店（长沙旗舰店）",
    "adress": "湖南省长沙市开福区伍家岭街道双拥路596号科大佳园北区1栋111",
    "sales": "1000+",
    "lng": 113.00,
    "lat": 28.24,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋蛋糕店（高新南站店）",
    "adress": "成都高新区天和西三街294号",
    "sales": "500+",
    "lng": 104.07,
    "lat": 30.60,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋蛋糕店（天府新区店）",
    "adress": "四川省成都市天府新区万安街道万东北二路50号4-1-8号",
    "sales": "600+",
    "lng": 104.09,
    "lat": 30.49,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋生日蛋糕（金牛区分店）",
    "adress": "四川省成都市金牛区子云路422号1层",
    "sales": "1000+",
    "lng": 104.04,
    "lat": 30.70,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋生日蛋糕（双流店）",
    "adress": "四川省成都市双流区东升街道藏卫路北一段100号",
    "sales": "800+",
    "lng": 103.92,
    "lat": 30.56,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋生日蛋糕（果堰店）",
    "adress": "四川省成都市武侯区果堰区街16号",
    "sales": "700+",
    "lng": 104.00,
    "lat": 30.64,
  },
  {
    "city": "成都",
    "name": "八喜冰淇淋生日蛋糕（郫都店）",
    "adress": "四川省成都市郫都区星光大道A区",
    "sales": "600+",
    "lng": 103.89,
    "lat": 30.81,
  },
  {
    "city": "重庆",
    "name": "八喜冰淇淋蛋糕（重庆渝北店）",
    "adress": "重庆市渝北区龙塔街道兴盛大道33号上品十六会所1-1（自编号1-1-3）",
    "sales": "1000+",
    "lng": 106.55,
    "lat": 29.59,
  },
  {
    "city": "重庆",
    "name": "八喜冰淇淋蛋糕（重庆弹字子石店）",
    "adress": "重庆市南岸区涂山镇福民路30号附33号",
    "sales": "1000+",
    "lng": 106.60,
    "lat": 29.59,
  },
  {
    "city": "重庆",
    "name": "八喜冰淇淋蛋糕（重庆大坪店）",
    "adress": "重庆市渝中区石油路街道时代天街19号2-5",
    "sales": "1000+",
    "lng": 106.51,
    "lat": 29.54,
  },
  {
    "city": "重庆",
    "name": "八喜冰淇淋蛋糕（重庆南岸店）",
    "adress": "南坪镇二塘路59号附73号",
    "sales": "800+",
    "lng": 106.57,
    "lat": 29.49,
  },
  {
    "city": "重庆",
    "name": "八喜冰淇淋蛋糕（沙坪坝店）",
    "adress": "土主镇永青路98号附6号",
    "sales": "900+",
    "lng": 106.36,
    "lat": 29.62,
  },
  {
    "city": "珠海",
    "name": "八喜冰淇淋蛋糕（珠海总店）",
    "adress": "珠海市香洲区明珠北路213号商铺之二冰淇淋蛋糕",
    "sales": "900+",
    "lng": 113.51,
    "lat": 22.27,
  }
]

export default {
  components: {
    radioSelectDialog
  },
  data() {
    const cityId = getStore({ name: 'areaId' })
    return {
      cityId,
      loading: false,
      noDanceCheck: false,
      allWarehose: [],
      showLabel: true,
    };
  },
  methods: {
    // 加载完城市列表
    handleLoadedCityList() {
      if (this.$refs.xmMap && this.$refs.xmMap.map) {
        this.addWarehouseOnMap(this.cityId).then(() => {
          this.$refs.xmMap.setCenterByOverlays()
        })
        this.addPlatformWareOnMap(this.cityId)
      }
    },
    // 切换城市
    handleCityChange(cityId) {
      this.setWarehouseByCity(cityId)
      if (cityId) {
        this.setCenterByCity()
      }
      return
    },
    // 绘制城市仓库范围
    setWarehouseByCity(cityId) {
      this.clearWarehoseMarkers()
      if (cityId) {
        this.addWarehouseOnMap(cityId)
        this.addPlatformWareOnMap(cityId)
      }
    },
    // 根据城市居中
    async setCenterByCity() {
      const cityName = this.$refs.citySelect.getSelectedLabel()
      if (!this.districtSearch) {
        this.districtSearch = await this.$refs.xmMap.districtSearchPlugin()
      }
      await new Promise((resolve) => {
        this.districtSearch.search(cityName, (status, result) => {
          const { lng, lat } = result.districtList[0] && result.districtList[0].center
          this.$refs.xmMap.setCenter([lng, lat])
          resolve()
        })
      })
    },
    // 添加仓库范围
    addWarehouseOnMap(cityId) {
      return getWarehouseList({ cityId }).then(res => {
        const resData = (res.data.data || []).filter(item => !item.name.includes('不跳舞'));
        if (resData && resData.length) {
          const markers = resData.map(item => {
            const options = {
              longitude: item.longitude,
              latitude: item.latitude,
              label: {
                direction: "top",
                content: getWarehouseLabel(item)
              },
            }
            const marker = this.$refs.xmMap.createMarker({
              ...options,
              label: this.showLabel ? options.label : null
            })
            marker.originOptions = options
            return marker
          });

          const polygonPath = resData.map(item => {
            return item.geoJson.geometry.coordinates[0]
          })
          const polygon = this.$refs.xmMap.createPolygon({
            path: polygonPath,
            strokeColor: "#000",
            strokeWeight: 3,
            strokeOpacity: 1,
            fillOpacity: 0.2,
            fillColor: "#43a0ff",
          });
          this.warehouseMarkers = markers
          this.warehousePolygons = [polygon]
          this.$refs.xmMap.map.add([...this.warehouseMarkers, ...this.warehousePolygons])
        }
      })
    },
    // 添加平台仓区域
    addPlatformWareOnMap(cityId) {
      getWarehouseByType({
        cityId,
        type: 99,// 平台仓
      }).then(res => {
        const resData = (res.data.data || []).filter(item => !item.name.includes('不跳舞'))
        if (resData && resData.length) {
          const markers = resData.map(item => {
            const options = {
              longitude: item.longitude,
              latitude: item.latitude,
              label: {
                direction: "top",
                content: getWarehouseLabel(item)
              },
            }
            const marker = this.$refs.xmMap.createMarker({
              ...options,
              label: this.showLabel ? options.label : null
            })
            marker.originOptions = options
            return marker
          });

          const polygonPath = resData.map(item => {
            return item.geoJson.geometry.coordinates[0]
          })
          const polygon = this.$refs.xmMap.createPolygon({
            path: polygonPath,
            strokeColor: "#FF33FF",
            strokeWeight: 2,
            strokeOpacity: 1,
            fillOpacity: 0.4,
            fillColor: "#1791fc",
            zIndex: 20
          });
          polygon.on('click', this.handleMapClick)
          this.platformWareMarkers = markers
          this.platformWarePolygons = [polygon]
          this.$refs.xmMap.map.add([...this.platformWareMarkers, ...this.platformWarePolygons])
        }
      })
    },
    clearWarehoseMarkers() {
      this.warehouseMarkers && this.$refs.xmMap.map.remove(this.warehouseMarkers)
      this.warehousePolygons && this.$refs.xmMap.map.remove(this.warehousePolygons)
      this.platformWareMarkers && this.$refs.xmMap.map.remove(this.platformWareMarkers)
      this.platformWarePolygons && this.$refs.xmMap.map.remove(this.platformWarePolygons)
    },
    handleLoadedMap() {
      this.drawOtherMarkers()
    },
    drawOtherMarkers() {
      const markers = baxiList.map(item => {
        const options = {
          longitude: item.lng,
          latitude: item.lat,
          label: {
            direction: "top",
            content: `<div class="c-fff  fz-14 lh-20" style="background-color: #ecf5ff;">
                        <div>店名：${item.name}</div>
                        <div>地址：${item.adress}</div>
                        <div>销量：${item.sales}</div>
                      </div>
                      `
          },
          icon: {
            image: icons['marker-red'],
            imageSize: new AMap.Size(24, 24), 
          },
          zIndex: 10
        }
        const marker = this.$refs.xmMap.createMarker({
          ...options,
          label: this.showLabel ? options.label : null
        });
        marker.originOptions = options;
        return marker;
      })
      this.markers = markers
      this.$refs.xmMap.map.add(markers)
    },
    handleLabelCheck(value) {
      const markers = [].concat(this.markers || []).concat(this.warehouseMarkers || []).concat(this.platformWareMarkers || [])
      if (value) {
        markers.forEach(item => {
          item.setLabel(item.originOptions.label)
        });
      } else {
        markers.forEach(item => {
          item.setLabel(null)
        });
      }
    }
  },
  created() {
  }
};
</script>
<style lang="scss" scoped>
.cost-calculation {
  .map-box {
    position: relative;
    width: 100%;
    height: 800px;

    .address-box {
      position: absolute;
      top: 20px;
      right: 20px;
      background: #fff;
      padding: 10px;
      z-index: 55;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, .25);
      border-radius: 4px;
    }
  }
}</style>